<!--
 * @Author: jinye.zhang
 * @Version: 1.0.0
 * @Date: 2021-09-08 14:19:43
 * @LastEditors: jinye.zhang
 * @LastEditTime: 2021-09-09 10:20:48
 * @Description: 提现
-->
<template>
  <view class="extraction-container">
    <view class="extraction-content default-box-shadow">
      <view class="extraction-content-cash">
        <view>
          <text class="extraction-content-tag">¥</text>
          <text>{{ userStatistics.balance || 0 }}</text>
        </view>
        <view class="cash-tip">可提现金额</view>
      </view>
      <view class="extraction-actions">
        <view class="extraction-actions-title">提现金额</view>
        <view class="cash-input-container">
          <view class="symbol">¥</view>
          <u-input v-model="cash" :placeholder="`最低可提现${withdrawSet.device_withdraw_min_cash || 0}元，最高${withdrawSet.device_withdraw_max_cash || 0}元`" class="cash-input-flex" :border="false" />
          <view class="all-btn" @click="cash = userStatistics.balance">全部</view>
        </view>
        <block>
          <view class="list-item">
            <view class="list-item-lable">提现方式</view>
            <view class="list-item-content">{{ userAlipayInfo.payment === 'wx' ? '微信' : '支付宝' || '' }}</view>
          </view>
          <view class="list-item">
            <view class="list-item-lable">到账账号</view>
            <view class="list-item-content">{{ userAlipayInfo.alipay_accout || '' }}</view>
            <view class="edit-btn" @click="settingAlipay">修改</view>
          </view>
          <view class="list-item">
            <view class="list-item-lable">真实姓名</view>
            <view class="list-item-content">{{ userAlipayInfo.real_name || '' }}</view>
          </view>
        </block>
      </view>
    </view>
    <view class="extraction-btn-container">
      <u-button :custom-style="{
        'backgroundColor': extractionCashFlag ? '#c0c0c0' : '#56d39d',
        'color': '#fff',
        'fontWeight': '700'
      }"
      shape="circle"
      :disabled="extractionCashFlag"
      :ripple="true"
      @click="handleExtractionCash">提交申请</u-button>
      <view class="tips">
        <!-- <text>下一次可提现日期为{{ nexDateStr }}号,申请提现后到账时间为1-7个工作日。</text> -->
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfoById } from '@/api/user';
import { withdrawSetInfoByApplet, submitApply } from '@/api/financialManagement';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      name: 'extractionCash',
      cash: null,
      nexDateStr: '',
      extractionCashFlag: true,
      device_withdraw_date: null,
      withdrawSet: null,
      currentDate: new Date().getDate(),
      userAlipayInfo: {
        real_name: null,
        alipay_accout: null,
        payment: ''
      },
      userForm: {
        id: null,
        real_name: null,
        alipay_accout: null,
        phone: null,
      },
    }
  },
  computed: {
    ...mapGetters([
      'userStatistics',
      'version',
    ]),
  },
  onShow() {
    this.getUserInfoById();
    this.getWithdrawSetInfo();
  },
  methods: {
    // 点击提现
    handleExtractionCash() {
      if (!this.cash) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none',
          mask: false
        })
      } else if (this.cash < parseFloat(this.withdrawSet.device_withdraw_min_cash || 0)) {
        uni.showToast({
          title: `提现金额必须大于${this.withdrawSet.device_withdraw_min_cash}元`,
          icon: 'none',
          mask: false
        })
      } else if (this.cash > parseFloat(this.withdrawSet.device_withdraw_max_cash || 0)) {
        uni.showToast({
          title: `提现金额必须小于${this.withdrawSet.device_withdraw_max_cash}元`,
          icon: 'none',
          mask: false
        })
      } else if (this.cash > parseFloat(this.userStatistics.balance || 0)) {
        uni.showToast({
          title: '提现金额必须小于等于可提现金额',
          icon: 'none',
          mask: false
        })
      } else {
        uni.showLoading({
          title: '提交中...',
          mask: true
        })
        submitApply({
          ...this.userAlipayInfo,
          cash: this.cash,
          type: 1, // 无线电提现
        }).then(result => {
          uni.hideLoading();
          if (result && result.code === 200) {
            uni.showToast({
              title: '申请成功',
              icon: 'none',
              mask: false
            });
            uni.reLaunch({ url: '/pages/mine/index' });
          }
        }).catch(() => {
          uni.hideLoading();
        })
      }
    },

    // 获取提现信息
    getWithdrawSetInfo() {
      withdrawSetInfoByApplet().then(result => {
        if (result && result.code === 200 && result.data && result.data.device_withdraw_date && result.data.device_withdraw_date.length) {
          let nexDateStr = ''; // 下一个提现日期
          const dateJson = JSON.parse(result.data.device_withdraw_date);
          const currentDate = new Date().getDate();
          const sortJosn = dateJson.sort(this.arraySort);
          const maxIndex = sortJosn.findIndex(item => item >= currentDate);
          if (maxIndex > 0) {
            nexDateStr = sortJosn[maxIndex];
          } else {
            nexDateStr = `下个月${sortJosn[0]}`;
          }
          this.nexDateStr = nexDateStr;
          this.device_withdraw_date = result.data.device_withdraw_date.substr(1, result.data.device_withdraw_date.length - 2);
          this.withdrawSet = result.data;
          let dateArray = JSON.parse(result.data.device_withdraw_date);
          const filterData = dateArray.filter(item => item === this.currentDate);
          if (filterData && filterData.length > 0) {
            this.extractionCashFlag = false;
          }
        } else {
          uni.showModal({
            title: "提示",
            content: "该商家不能提现，未配置提现功能",
            showCancel: !1,
            success: res => {
              uni.reLaunch({ url: '/pages/index?index=4' });
            }
          })
        }
      })
    },

    // 根据用户id获取用户信息
    getUserInfoById() {
      getUserInfoById().then(result => {
        if (result && result.data) {
          this.userAlipayInfo = {
            real_name: result.data.authorInfo.real_name,
            alipay_accout: result.data.authorInfo.payment_account,
            payment: result.data.authorInfo.payment,
          }
        }
      })
    },

    // 设置支付宝账号
    settingAlipay() {
      uni.navigateTo({ url: '/pages/profile/profile' })
    }
  },
  onShareAppMessage() {
    console.log('分享');
  },
}
</script>

<style lang="scss">
  page{
    background-color: #f8f8f8;
  }
  .extraction-container{
    color: #333;
    padding: 24rpx;
    .extraction-content{
      padding: 24rpx;
      border-radius: 16rpx;
      background-color: #fff;
    }
    .extraction-content-tag{
      font-size: 24rpx;
      padding: 0 6rpx;
    }
    .extraction-content-cash{
      margin: 24rpx 0;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
    }
    .cash-tip{
      font-size: 24rpx;
      padding-top: 12rpx;
      font-weight: normal;
    }
    .extraction-actions-title{
      font-size: 28rpx;
      font-weight: bold;
    }
    .cash-input-container{
      display: flex;
      align-items: center;
      line-height: 60rpx;
      border-bottom: 1rpx solid #dcdfe6;
      margin-bottom: 24rpx;
      .symbol{
        width: 30rpx;
        height: 60rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
      .all-btn{
        width: 80rpx;
        height: 60rpx;
        text-align: center;
        color: $uni-color-primary;
      }
      .cash-input-flex{
        flex: 1;
      }
    }
    .list-item{
      display: flex;
      font-size: 28rpx;
      margin-bottom: 12rpx;
      position: relative;
      .list-item-lable{
        width: 160rpx;
      }
      .edit-btn{
        width: 80rpx;
        height: 38rpx;
        font-size: 24rpx;
        position: absolute;
        margin: auto;
        right: 0;
        bottom: 0;
        top: 0;
        text-align: center;
        line-height: 36rpx;
        border-radius: 19rpx;
        border: 1rpx solid #dcdfe6;
      }
    }
  }
  .extraction-btn-container{
    margin-top: 60rpx;
    .tips{
      font-size: 20rpx;
      color: #c0c0c0;
      text-align: center;
      padding: 12rpx 0;
    }
  }
  .bind-alipay-content{
    padding: 24rpx;
    .bind-title{
      font-size: 28rpx;
      text-align: center;
      color: #333;
      padding: 6rpx 0;
    }
    .bind-btn{
      background-color: $uni-color-primary;
      color: #fff;
    }
  }
</style>
